<template>
  <div style="overflow: hidden" class="chart-wrap">
    <div class="date-wrap">
      <el-date-picker style="width: 100%;" v-model="selectedDate" type="date" @change="handdleChange"
        value-format="yyyy-MM-dd" popper-class="datepick" placeholder="选择日期">
      </el-date-picker>
    </div>
    <div class="top-solid"></div>
    <div class="left-solid"></div>
    <div class="right-solid"></div>
    <div id="flow" :style="{ width: '100%', height: '300px' }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
      selectedDate: '',
      arrX: [],
      arrY1: [],
      arrY2: [],
      arrY3: [],
    };
  },
  watch: {},
  mounted() {
    // 模拟数据
    this.arrX = ['安徽', '上海', '河南', '湖北', '江西', '浙江', '江苏', '山东']
    this.arrY1 = ['100', '222', '333', '74', '590', '406', '207', '408']
    this.arrY2 = ['1002', '1222', '1333', '174', '1590', '46', '27', '48']
    this.arrY3 = ['1002', '1222', '1333', '174', '1590', '46', '27', '48']
    this.getEcharts();
    window.addEventListener("resize", this.resize);
    // 默认当前日期
    this.getCurrentDate()
  },
  methods: {
    getEcharts() {
      this.myChart = echarts.init(document.getElementById("flow"));
      this.myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 鼠标移入后的阴影
          },
          formatter: function (params) {
            // 自定义提示框内容，加上颜色圆点
            let color1 = 'rgba(44, 125, 214, 1)'
            let color2 = 'rgba(11, 212, 139, 1)'
            let color3 = 'rgba(246, 180, 103, 1)'
            // params点击legend的内容会动态变化，不能直接写死
            if (Array.isArray(params) && params.length) {
              var content = `<div><h3 style="width: 150px; text-align: left;">${params[0].axisValue}</h3>`;
              params.forEach(function (item) {
                if(item.seriesName == '总车流量'){
                  content += `<div style="display: flex; align-items: center"><div style="height: 10px; width:10px; border-radius: 50%; background: ${color1}; margin-right: 10px"></div><div style="flex: 1; text-align: left;">${item.seriesName}</div><div style="flex: 1; text-align: left;">${item.value}</div></div>`;
                }
                if(item.seriesName == '客车'){
                  content += `<div style="display: flex; align-items: center"><div style="height: 10px; width:10px; border-radius: 50%; background: ${color2}; margin-right: 10px"></div><div style="flex: 1; text-align: left;">${item.seriesName}</div><div style="flex: 1; text-align: left;">${item.value}</div></div>`;
                }
                if(item.seriesName == '货车'){
                  content += `<div style="display: flex; align-items: center"><div style="height: 10px; width:10px; border-radius: 50%; background: ${color3}; margin-right: 10px"></div><div style="flex: 1; text-align: left;">${item.seriesName}</div><div style="flex: 1; text-align: left;">${item.value}</div></div>`;
                }
                
              });
              content += '</div>`'
              return content
            }


            return ``
          }
        },
        legend: {
          data: ["总车流量", "客车", '货车'],
          top: 20,
          textStyle: {
            color: "#000",
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "3%",
          top: '25%',
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true, // 当图标超出X轴到负半轴时设置为true可解决
          data: this.arrX,
          axisLabel: {
            textStyle: {
              fontWeight: "bolder",
              color: "#000",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "单位:辆次",
          nameTextStyle: { // 单位的样式和位置
            color: "#000",
            fontSize: 12,
            padding: [15, 25, 22, 0],
          },
          splitLine: {
            show: true,
            lineStyle: { // 与X轴平行的线的样式
              type: "dashed",
              color: "rgba(0,0,0,0.3)",
            },
          },
          axisLabel: { // Y轴刻度的样式
            formatter: '{value}',
            textStyle: {
              fontWeight: "bolder",
              color: "#000",
            },
          },
        },
        series: [
          {
            name: "总车流量",
            type: "bar",
            // barWidth:'20%', // 柱子的宽度
            // stack: "Ad", // 下面设置相同则堆叠
            // yAxisIndex: 1, // k开启双y轴
            emphasis: {
              focus: "series", // 鼠标移入其他柱子消失
            },
            itemStyle: {
              borderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                  每项为一个对象，包含offset和color两个参数
                */
                0, 1, 0, 0,
                [
                  {//代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: 'rgba(44, 125, 214, 0)'
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: 'rgba(44, 125, 214, 1)'
                  }
                ]
              ),
            },
            data: this.arrY1
          },
          {
            name: "客车",
            type: "bar",
            emphasis: {
              focus: "series", // 鼠标移入其他柱子消失
            },
            // stack: "Total",
            itemStyle: {
              borderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  {//代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: 'rgba(11, 212, 139,0)'
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: 'rgba(11, 212, 139, 1)'
                  }
                ]
              ),
              // 设置柱子的边框
              borderColor: 'rgba(11, 212, 139, 1)',
              borderWidth: 2,
            },
            data: this.arrY2,
          },
          {
            name: "货车",
            type: "bar",
            emphasis: {
              focus: "series", // 鼠标移入其他柱子消失
            },
            data: this.arrY3,
            itemStyle: {
              borderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  {//代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: 'rgba(246, 180, 103, 0)'
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: 'rgba(246, 180, 103, 1)'
                  }
                ]
              ),
              // 设置阴影上边框对柱子的透明度有影响
              shadowColor: '#000', // 上边框颜色
              shadowBlur: 0, // 阴影模糊大小，设置为0以得到清晰边框
              shadowOffsetY: -3, // 阴影垂直偏移，负值会在上方产生阴影，模拟上边框
            },
          },
        ],
      });
    },
    handdleChange(val) {
      console.log(val);
    },
    // 当前日期
    getCurrentDate() {
      const nowDay = new Date()
      var year = nowDay.getFullYear()
      var month = nowDay.getMonth() + 1 < 10 ? '0' + (nowDay.getMonth() + 1) : nowDay.getMonth() + 1
      var day = nowDay.getDate() < 10 ? '0' + nowDay.getDate() : nowDay.getDate()
      day = day < 10 ? `0${day}` : day
      const d = `${year}-${month}-${day}`
      this.selectedDate = d
    },
    // 页面缩放
    resize() {
      this.myChart.resize();
    },
  },
  beforeDestroy() {
    if (!this.myChart) {
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myChart.dispose()
  },
};
</script>
<style lang="scss">
.datepick {
  background: rgba(22, 142, 250, 0.4) !important;

  .el-picker-panel__body {
    color: #fff;
  }

  .el-date-table th {
    color: #fff;
  }

  .el-picker-panel__icon-btn {
    color: #fff;
  }

  .el-date-picker__header-label {
    color: #fff;
  }
}
</style>
<style lang="scss" scoped>
/* 修改日期选择器下拉菜单的文本颜色 */
::v-deep .el-date-picker .el-picker-panel__body .el-scrollbar__view {
  color: #606266;
}

.top-solid {
  width: 100%;
  height: 1px;
  background: #F59969;
  border: 1px solid #04BBFF;
  opacity: 0.6;
  position: absolute;
  top: 50px;
}

.left-solid {
  width: 10px;
  height: 2px;
  background: #F59969;
  border: 1px solid #04BBFF;
  opacity: 1;
  position: absolute;
  top: 50px;
  left: 0px;
}

.right-solid {
  width: 10px;
  height: 2px;
  background: #F59969;
  border: 1px solid #04BBFF;
  opacity: 1;
  position: absolute;
  top: 50px;
  right: 0px;
}

.chart-wrap {
  position: relative;
  text-align: center;
  color: #fff;

  .chart {
    width: 80%;
    height: 100%;
    margin-left: 10%;
    padding-top: 25px;
  }

  .date-wrap {
    z-index: 9999;
    position: absolute;
    right: 0;
    top: 8px;
    width: 135px;
    height: 34px;
    line-height: 34px;
    background: rgba(22, 142, 250, 0.12);
    font-weight: bold;
    color: #fff;
    cursor: pointer;

    .el-input__inner {
      background: rgba(22, 142, 250, 0.12);
      color: #fff;
    }

    .date-list {
      border: 1px solid #168EFA;
      background: #061b3d;

      .item {
        text-align: center;
        line-height: 30px;
      }

      .item:hover {
        background: rgba(22, 142, 250, 0.12)
      }
    }
  }
}
</style>